.security-2fa-progress__container {
	margin: 0 -16px 16px;

	@include breakpoint( '>480px' ) {
		margin: 0 -24px 24px;
	}

	.security-2fa-progress__inner-container {
		display: flex;
		position: relative;

		&::before {
			background-color: var( --color-neutral-10 );
			content: ' ';
			display: block;
			height: 1px;
			position: absolute;
			top: 26px;
			width: 100%;
		}

		.security-2fa-progress__item {
			flex: 1;
			position: relative;
			text-align: center;

			&.is-highlighted {

				&::before {
					background-color: var( --color-primary );
					content: ' ';
					display: block;
					height: 2px;
					position: absolute;
					top: 24px;
					width: 50%;
				}

				.gridicon {
					background: var( --color-primary );
					color: var( --color-text-inverted );
					border-color: var( --color-primary );
				}

				label {
					color: var( --color-primary );
					font-weight: 600;
				}
			}

			&.is-completed {

				&::before {
					background-color: var( --color-primary );
					content: ' ';
					display: block;
					height: 2px;
					position: absolute;
					top: 24px;
					width: 100%;
				}

				.gridicon {
					background: var( --color-neutral-10 );
					color: var( --color-neutral-light );
				}

				label {
					color: var( --color-neutral-light );
				}
			}

			.gridicon {
				background: var( --color-surface );
				border: 1px var( --color-neutral-10 ) solid;
				border-radius: 50%;
				color: var( --color-neutral-10 );
				display: block;
				margin: 0 auto;
				position: relative;
				padding: 12px;

				&::before {
					font-size: 32px;
					position: relative;
					top: 8px;
				}
			}

			label {
				color: var( --color-neutral-10 );
				display: inline-block;
				font-size: 14px;
				line-height: 1;
				margin-top: 8px;
				max-width: 112px;
				text-align: center;
			}
		}
	}
}
